<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="30%"
  >
    <el-form
      :model="attrGroup"
      :rules="rules"
      ref="attrGroup"
      label-width="100px"
    >
      <el-form-item
        label="组名称"
        prop="attrGroupName"
      >
        <el-input
          v-model="attrGroup.attrGroupName"
          autocomplete="off"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="组排序">
        <el-input-number
          v-model="attrGroup.sort"
          :min="0"
          :max="10"
          style="width: 80%"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="组图标"
        prop="icon"
      >
        <el-input
          v-model="attrGroup.icon"
          autocomplete="off"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="组描述">
        <el-input
          v-model="attrGroup.descript"
          autocomplete="off"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-cascader
          v-model="value"
          :options="options"
          :props="catCascade"
          placeholder="试试搜索：手机"
          filterable
          style="width: 80%"
        >
        </el-cascader>
      </el-form-item>

    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit('attrGroup')"
      >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      title: '',
      attrGroup: { // 表单项
        attrGroupId: '',
        attrGroupName: '',
        sort: '',
        descript: '',
        icon: '',
        catelogId: '',
        valuePath: [],
        showStatus: 1
      },
      rules: { // 校验规则
        attrGroupName: [{
          required: true,
          message: '请输入属性分组名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 5,
          message: '长度在 1 到 5 个字符',
          trigger: 'blur'
        }
        ]
      },
      value: [],
      options: [], // 级联数据源
      catCascade: { // 级联属性分配
        expandTrigger: 'hover',
        value: 'catId',
        label: 'name',
        children: 'children'
      },
      dialogType: '', // 对话框的类型，添加还是修改
      row: '' // 修改点击每行的数据
    }
  },
  methods: {
    init (index, row) {
      this.visible = true
      if (Number.isNaN(parseInt(index))) {
        this.title = '添加组'
        this.dialogType = 'add'

        this.addEchoAttrGroup()
      } else {
        this.title = '修改组'
        this.dialogType = 'edit'
        this.row = row
        this.editEchoAttrGroup(this.row)
      }
    },
    // 添加时清空回显
    addEchoAttrGroup () {
      this.attrGroup.attrGroupId = ''
      this.attrGroup.attrGroupName = ''
      this.attrGroup.sort = ''
      this.attrGroup.descript = ''
      this.attrGroup.icon = ''
      this.value = []
    },
    // 添加
    addAttrGroup () {
      this.attrGroup.catelogId = this.value[this.value.length - 1]
      this.$http({
        url: this.$http.adornUrl('/product/attrgroup/save'),
        method: 'post',
        data: this.$http.adornData(this.attrGroup, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '组保存成功!'
        })
        this.visible = false // 关闭对话框
        this.$emit('refreshDataList') // 刷新数据
      })
    },

    // 修改回显
    editEchoAttrGroup (row) {
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/info/${row.attrGroupId}`),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({
        data
      }) => {
        // 回显
        this.attrGroup.attrGroupId = data.data.attrGroupId
        this.attrGroup.attrGroupName = data.data.attrGroupName
        this.attrGroup.sort = data.data.sort
        this.attrGroup.descript = data.data.descript
        this.attrGroup.icon = data.data.icon
        this.value = data.data.valuePath
      })
    },

    // 修改
    editAttrGroup () {
      this.$http({
        url: this.$http.adornUrl('/product/attrgroup/update'),
        method: 'post',
        data: this.$http.adornData(this.attrGroup, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '组修改成功!'
        })
        this.visible = false // 关闭对话框
        this.$emit('refreshDataList') // 刷新数据
      })
    },

    // 表单提交
    dataFormSubmit (attrGroup) {
      this.$refs[attrGroup].validate((valid) => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addAttrGroup()
          } else {
            this.editAttrGroup()
          }
        } else {
          return false
        }
      })
    },
    getCategoryOptions () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({ data }) => {
        this.options = data.data
      })
    }
  },
  created () {
    this.getCategoryOptions()
  }
}
</script>
